import React, { Component, PropTypes } from 'react'

export default class Modal extends Component {
    constructor() {
        super();
        this.state = {
            isOpen: false
        }
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({
                isOpen: true
            })
        }, 100)
    }
    render() {
        const { title, submitText, data, children, message, isPending, complete, error, onClose, onSubmit } = this.props;
        const { isOpen } = this.state;
        return <div className={"modal fade" + (isOpen ? ' in' : '')} style={{ display: 'block' }}>
            <div className="modal-dialog">
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" onClick={onClose || onSubmit}><span>&times;</span></button>
                        <h4 className="modal-title">{title}</h4>
                    </div>
                    <div className="modal-body" style={{ textAlign: 'left' }}>
                        {message ? <h5 className="text-center">{message}</h5> : children}
                    </div>
                    <div className="modal-footer" style={{ textAlign: 'right' }}>
                        {
                            onClose ? (message || onClose) ? <button type="button" className="btn btn-default" onClick={onClose}>取消</button> : null : ''
                        }
                        {!message ? <button type="button" className={"btn btn-primary" + (isPending || !complete ?' disabled' : '')} onClick={!isPending && complete ? () => onSubmit(data) : () => {}} style={{ marginLeft: 10 }}>{submitText || '确定'}</button> : null}
                    </div>
                </div>
            </div>
        </div>
    }
}
